<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>个人中心</title>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.intro {
				width: 100%;
				height: 211px;
				margin-bottom: 15px;
				text-align: center;
				background: url(../../images/mycenter_bg.png) no-repeat center center/cover;
			}
			
			.intro .mui-bar {
				position: static;
				background: none;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			
			.intro .mui-bar .mui-icon-left-nav {
				color: #000;
			}
			
			.intro .my-intro {
				display: -webkit-flex;
				display: flex;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-align-items: center;
				align-items: center;
			}
			
			.my-intro .mui-icon-left-nav {
				color: #000;
			}
			
			.my-intro .my-intro__header img {
				width: 100px;
				height: 100px;
				margin-bottom: 10px;
				border: 2px solid #fff;
				border-radius: 50%;
			}
			
			.my-intro .my-intro__name {
				margin-bottom: 5px;
				font-size: 20px;
				color: #05517d;
			}
			
			.my-intro .my-intro__login p {
				font-size: 13px;
			}
			
			.my-content:before,
			.my-content:after {
				background: none;
			}
			
			.my-content .mui-table-view-cell .iconfont {
				margin-right: 5px;
				vertical-align: bottom;
				font-size: 24px;
			}
			
			.exit-btn {
				margin: 24px 0 22px 0;
				text-align: center;
			}
			
			.exit-btn a {
				font-size: 18px;
				color: #999 !important;
			}
			
			.exit-btn:before,
			.exit-btn:after {
				background: none;
			}
		</style>
	</head>

	<body>
		<div id="my_center" class="mui-content">
			<!-- 个人信息 -->
			<div class="intro">
				<header class="mui-bar mui-bar-nav">

				</header>
				<div class="my-intro" id="myCenterDIV">
				</div>
			</div>
			<!-- 个人中心内容 -->
			<ul id="myCenterFunc" class="mui-table-view mui-table-view-chevron my-content">
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-navigate-right" id="my_comments"><i class="mui-icon iconfont">&#xe616;</i>我的评论</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-navigate-right" id="my_collections"><i class="mui-icon iconfont">&#xe617;</i>我的收藏</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-navigate-right" id="my_setting"><i class="mui-icon iconfont">&#xe619;</i>我的设置</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-navigate-right" id="about_us"><i class="mui-icon iconfont">&#xe623;</i>关于我们</a>
				</li>
			</ul>
			<!-- 安全退出 -->
			<ul id="exit" class="mui-table-view exit-btn">
				<li class="mui-table-view-cell" id="exitBtn">
					<a href="javascript:;">安全退出</a>
				</li>
			</ul>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/common.js"></script>
		<script id="myCenter" type="text/html">
			<div class="my-intro__header">
				<img id="headimgurl" src="{{data.photo}}" alt="" onerror="this.src='../../images/avatar.png'" />
			</div>
			<div id "nameDiv" class="my-intro__name c-white">
				{{data.name}}
			</div>
			<div class="my-intro__login">
				<p id="logCategory" class="c-white">
					<!--通过微博登录-->{{data.way}}
				</p>
			</div>
		</script>
		<script>
			var uuid = null;
			mui.init();
			mui.plusReady(function() {
				uuid = plus.device.uuid; //获取设备的唯一标识
				showLogin();
			});
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
				plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
				plus.navigator.setStatusBarBackground("#000");
			});*/
			
			window.addEventListener('success', function(event) {
				showLogin();
			});
			
			function showLogin(){
				mui.ajax({
					url: baseUrl + '/my/showUc?devicesId=' + uuid,
					dataType: 'json',
					type: 'get',
					success: function(data) {
						if (data.returnFlag == 0) {
							if (!data.data.name) { //未登录
								data.data.name = "立即登录";
								document.getElementById("myCenterDIV").addEventListener("tap", function(){
									mui.openWindow({
										url: 'login.html',
										id: 'login.html',
										waiting: {
											autoShow: false
										}
									});
								});
								$('#exit').css('display', 'none');
							} else { //已登陆
								if (data.data.weixinuuid == 1) {
									data.data.way = "通过微信登录";
								} else if (data.data.weibouuid == 1) {
									data.data.way = "通过微博登录";
								} else if (data.data.qquuid == 1) {
									data.data.way = "通过QQ登录";
								}
								document.getElementById("myCenterDIV").removeEventListener("tap", function(){
									mui.openWindow({
										url: 'login.html',
										id: 'login.html',
										waiting: {
											autoShow: false
										}
									});
								});
								$('#exit').css('display', 'block');
							}
							var html = template('myCenter', data);
							document.getElementById('myCenterDIV').innerHTML = html;
						}
					},
					error: function(xhr, type, errorThrown) {
						//异常处理；
						throwGetNewsError();
					}
				});
			}
			//添加列表项的点击事件
			mui('#myCenterFunc').on('tap', 'a', function(e) {
				var id = this.getAttribute('id');
				if (id != "my_setting") {
					if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
						mui.toast("网络不给力");
						return;
					}
				}
				if (!isLogin() && id != "my_setting" && id != "about_us") {
					mui.openWindow({
						url: 'login.html',
						id: 'login.html',
						createNew: true,
						waiting: {
							autoShow: false
						},
						show: {
							aniShow: 'pop-in' //页面显示动画，默认为”slide-in-right“；
						}
					});
				} 
				else if(id == "about_us"){
					mui.openWindow({
						url: 'about_us.html',
						id: 'about_us.html',
						waiting: {
							autoShow: false
						},
						show: {
							aniShow: 'pop-in' //页面显示动画，默认为”slide-in-right“；
						}
					});
				}
				else {
					var detailPage = plus.webview.getWebviewById(id + '.html');
					mui.fire(detailPage, 'refreshList', {});
					mui.openWindow({
						url: id + '.html',
						id: id + '.html',
						createNew: true,
						waiting: {
							autoShow: false
						},
						show: {
							aniShow: 'pop-in' //页面显示动画，默认为”slide-in-right“；
						}
					});
				}
			});
			//安全退出
			document.getElementById('exit').addEventListener('tap', function() {
				var btnArray = [{
					title: "注销当前账号"
				}];
				plus.nativeUI.actionSheet({
					cancel: "取消",
					buttons: btnArray
				}, function(event) {
					var index = event.index;
					if (index == 1) {
						var uuid = plus.device.uuid; //获取设备的唯一标识
						mui.ajax({
							url: baseUrl + '/my/loginOut?devicesId=' + uuid,
							dataType: 'json',
							type: 'get',
							success: function(data) {
								var centerPage = plus.webview.currentWebview();
								centerPage.reload();
								plus.storage.removeItem(user_token);
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
							}
						});
					}
				});
			}, false);
		</script>
	</body>

</html>